<template>
    <app-layout v-model="safePt" btnType="unset" headerBackgroundColor="unset" :showHeader="false">
        <view class="index-container">
            <view class="immerse-image">
                <image class="image" :src="backgroundImage" mode="aspectFill" />
            </view>
            <view class="immerse-main" :style="{ paddingTop: safePt + utils.rpx2px(20) + 'px' }">
                <view class="head-title">
                    <text class="title">熊熊建材安装<text class="color">师傅版</text></text>
                    <text class="desc">将好师傅交给用户让好服务走进万家 </text>
                </view>
                <view class="section">
                    <view class="notify">
                        <view class="icon">
                            <text class="iconfont icon-gonggao"></text>
                            <text class="text">公告</text>
                        </view>
                        <view class="slide-box">
                            <swiper
                                class="notify-swiper"
                                circular
                                :indicator-dots="false"
                                :autoplay="true"
                                :vertical="true"
                                interval="3000"
                                duration="1000"
                            >
                                <swiper-item v-for="(item, index) in notifyList" :key="index" @click="notifyDetail(item)">
                                    <view class="swiper-item notify-item">
                                        <text class="limit-line clamp-1">
                                            {{ item.title }}
                                        </text>
                                    </view>
                                </swiper-item>
                            </swiper>
                        </view>
                    </view>
                    <view class="nav">
                        <view class="nav-item" @click="utils.toPage('/pages/get/index')">
                            <image class="icon" :src="require('@/static/temp/index/1.png')" mode="aspectFill" />
                            <text class="title">接单大厅</text>
                        </view>
                        <view class="nav-item" @click="toMessage(1)">
                            <image class="icon" :src="require('@/static/temp/index/2.png')" mode="aspectFill" />
                            <text class="title">平台规则</text>
                        </view>
                        <view class="nav-item" @click="showService = true">
                            <image class="icon" :src="require('@/static/temp/index/3.png')" mode="aspectFill" />
                            <text class="title">平台客服</text>
                        </view>
                        <view class="nav-item" @click="toMessage(2)">
                            <image class="icon" :src="require('@/static/temp/index/4.png')" mode="aspectFill" />
                            <text class="title">帮助中心</text>
                        </view>
                    </view>
                    <view class="action-group">
                        <view class="item" @click="toGet(0)">
                            <text class="num">{{ action.item1 }}</text>
                            <text class="title">立即抢单</text>
                        </view>
                        <view class="item" @click="toGet(1)">
                            <text class="num">{{ action.item2 }}</text>
                            <text class="title">立即报价</text>
                        </view>
                        <view class="item" @click="toGet(2)">
                            <text class="num">{{ action.item3 }}</text>
                            <text class="title">配送抢单</text>
                        </view>
                        <view class="item" @click="toOrder(1)">
                            <text class="num">{{ action.item4 }}</text>
                            <text class="title">指派专区</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <widget-modal v-show="showNotifyModal" @close="showNotifyModal = false" :title="notify.title">
            <view class="message-box">
                <rich-text :nodes="notify.content"></rich-text>
            </view>
        </widget-modal>
        <widget-service :showService="showService" @close="showService = false" />
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import WidgetModal from "@/components/widgets/modal";
import WidgetService from "@/components/widgets/service";
export default {
    name: "index",
    data() {
        return {
            utils: this.$utils,
            safePt: 0,
            backgroundImage: require("@/static/temp/1.png"),
            notifyList: [],
            showService: false,
            showNotifyModal: false,
            notify: {
                title: "",
                content: "",
            },
            action: {
                item1: 0,
                item2: 0,
                item3: 0,
                item4: 0,
            },
        };
    },
    components: {
        AppLayout,
        WidgetModal,
        WidgetService,
    },
    onLoad() {
        this.$models.system.notifyList(1, 1).then((list) => {
            this.notifyList = list;
        });
    },
    onShow() {
        this.$models.system.serviceData().then((data) => {
            this.action.item1 = data.order1;
            this.action.item2 = data.order2;
            this.action.item3 = data.order3;
            this.action.item4 = data.order4;
        });
        this.$store.commit("system/refreshGet", true);
        this.$store.commit("system/refreshOrder", true);
    },
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    onShareTimeline() {},
    onShareAppMessage() {},
    methods: {
        toMessage(id) {
            this.$store.commit("system/messageTabIndex", id);
            this.$utils.toPage("/pages/message/message", {}, "switch");
        },
        toGet(index) {
            this.$store.commit("system/getTabIndex", index);
            this.$utils.toPage("/pages/get/index", {});
        },
        toOrder(index) {
            this.$store.commit("system/orderTabIndex", index);
            this.$utils.toPage("/pages/order/order", {}, "switch");
        },
        notifyDetail(detail) {
            this.showNotifyModal = true;
            this.notify.title = detail.title;
            this.notify.content = detail.message;
        },
    },
};
</script>

<style lang="less" scoped>
.section {
    width: 710rpx;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    margin: 24rpx auto 0 auto;
}
.notify {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 14rpx solid #efefef;
    padding: 20rpx 0 30rpx 0;
    .icon {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        .iconfont {
            font-size: 40rpx;
            color: #f9b060;
        }
        .text {
            display: inline-block;
            font-size: 30rpx;
            font-weight: bold;
            font-style: italic;
            color: #7286f1;
            margin-left: 8rpx;
        }
    }
    .slide-box {
        width: 100%;
        height: 40rpx;
        margin-left: 26rpx;
        line-height: 40rpx;
        .notify-swiper {
            display: block;
            width: 100%;
            height: 100%;
        }
        .notify-item {
            font-size: 26rpx;
            color: #666666;
        }
    }
}
.nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 36rpx 15rpx 50rpx 15rpx;
    border-bottom: 2rpx solid #efefef;
    .nav-item {
        width: 100rpx;
        text-align: center;
    }
    .icon {
        width: 100rpx;
        height: 100rpx;
    }
    .title {
        font-size: 24rpx;
        color: #333333;
    }
    .nav-item:nth-child(4n) {
        margin-right: 0;
    }
}
.action-group {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 50rpx 0 70rpx 0;
    .item {
        width: 324rpx;
        height: 224rpx;
        border-radius: 20rpx;
        margin-right: 22rpx;
        margin-top: 22rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #ffffff;
        .num {
            font-size: 100rpx;
            line-height: 100rpx;
        }
        .title {
            display: inline-block;
            font-size: 36rpx;
            line-height: 36rpx;
            margin-top: 24rpx;
        }
    }
    .item:nth-child(1),
    .item:nth-child(2) {
        margin-top: 0;
    }
    .item:nth-child(2n) {
        margin-right: 0;
    }
    .item:nth-child(1) {
        background: linear-gradient(135deg, #fec04b, #eacc52, #f0d8a3);
    }
    .item:nth-child(2) {
        background: linear-gradient(135deg, #f69029, #f7b13d, #fec54c);
    }
    .item:nth-child(3) {
        background: linear-gradient(135deg, #3e61ee, #5b80dd, #6999fd);
    }
    .item:nth-child(4) {
        background: linear-gradient(135deg, #328eff, #2fb2fe, #44c2ee);
    }
}
.message-box {
    max-height: 400rpx;
    overflow-y: scroll;
}
</style>